<template>
  <div class="a" v-Test>
    <p class="b">顶部</p>
    <div class="c"></div>
  </div>
</template>

<script setup lang='ts'>
import type { Directive } from 'vue'

// 如果说只用到mounted和updated这两个钩子函数,则可以使用自定义指令的简写形式,也就是函数模式
const vTest: Directive<HTMLButtonElement> = (el) => {
  // 声明一个鼠标按下事件回调函数
  const mousedown = () => {
    // 声明一个鼠标移动事件回调函数
    const mousemove = (e: MouseEvent) => {
      el.style.left = e.pageX + 'px'
      el.style.top = e.pageY + 'px'
    }
    document.addEventListener('mousemove', mousemove)
    //鼠标抬起事件
    document.addEventListener('mouseup', () => {
      // 解绑鼠标移动事件事件
      document.removeEventListener('mousemove', mousemove)
    })
  }
  el.addEventListener('mousedown', mousedown)
}

</script>

<style lang='scss' scoped>
* {
  margin: 0;
  padding: 0;
}

.a {
  width: 400px;
  height: 300px;
  border: 1px red solid;
  position: absolute;

  .b {
    width: 100%;
    height: 50px;
    background-color: aquamarine;
    text-align: center;
    line-height: 50px;
  }

  .c {
    width: 100%;
    height: 250px;
  }
}
</style>

